<template>
	<!-- 页面全局配置 -->
	<view class="pageconfig">
		<!--vuetop-->
		<view class="flex1   response  flex  justify-start  ">
			<text class="text2 text-black text-left text-xxl text-bold "> 纸条传信</text>
		</view>
		<view class="flex3  bg-white  response  flex  justify-start  " style="flex-direction: column;">
			<view class="flex4  bg-white  response  flex  justify-start  "
				style="flex-direction: row;align-items: center;">
				<view class="flex5    flex  justify-center  "
					style="flex-direction: column;align-content: center;align-items: center;">
					<text class="text6 text-left text-xl text-bold "> 你瞧</text>
				</view>
				<text class="text7 text-black text-left text-xl text-bold "> 被人记起的感觉多么美好！</text>
			</view>
			<view class="flex8  bg-white  response  flex  justify-start  " style="flex-direction: row;">
				<view class="flex9  bg-white   flex  justify-start  "
					style="flex-direction: column;align-content: space-between;align-items: center;height:472rpx;min-height:unset;">
					<view class="flex10   response  flex  justify-start  " style="flex-direction: column;">
						<text class="text11 text-black "> 至少在这个世界上</text>
						<text class="text12 text-black "> 你能真真切切的想</text>
						<text class="text13 text-black "> 我</text>
					</view>
					<view class="flex14   response  flex  justify-center  " @click="nav_to_write"
						style="align-items: center;height:70rpx;min-height:unset;">
						<image style="width:34rpx;height:32rpx;min-height:unset;" mode="" class="picture15 "
							:src="picsrc15"></image>
						<text class="text-white "> 去写信</text>
					</view>
					<view class="flex17   response  flex  justify-center  "
						style="flex-direction: row;align-items: center;">
						<image style="width:28rpx;height:24rpx;min-height:unset;" mode="" class="picture18 "
							:src="picsrc18"></image>
						<text> 已经发出 </text>
						<text class="text20 "> 106802 </text>
						<text> 封信</text>
					</view>
				</view>
				<view class="flex22  bg-white   flex  justify-start  ">
					<image style="width:428rpx;height:472rpx;min-height:unset;" mode="aspectFit" class="picture23 "
						:src="picsrc23"></image>
				</view>
			</view>
		</view>
		<view class="flex24  bg-white  response  flex  justify-around  "
			style="flex-direction: row;align-content: space-around;align-items: center;">
			<view class="flex25  bg-white   flex  justify-between  " style="flex-direction: row;align-items: center;">
				<image style="width:48rpx;height:48rpx;min-height:unset;" mode="" class="picture26 " :src="picsrc26">
				</image>
				<view class="flex27    flex  justify-start  " style="flex-direction: column;">
					<text class="text28 text-lg "> 草稿信箱</text>
					<text class="text29 text-sm "> 这里有您没有编辑完的信件喔~</text>
				</view>
			</view>
			<view class="flex30    flex  justify-center  " style="align-items: center;" @click="to_caogao">
				<text class="text31 "> 去查看</text>
			</view>
		</view>

		<!--vuebottom-->
	</view>
</template>

<script>
	import Vue from 'vue'
	export default {
		data() {
			return {
				picsrc15: "/static/index/feiji.png",
				picsrc18: "/static/index/xin.png",
				picsrc23: "/static/index/bg.png",
				picsrc26: "/static/index/caogao.png",




			};
		},
		onLoad() {


		},
		methods: {
			to_caogao() {
				uni.reLaunch({
					url: "./caogao"
				})
			},
			nav_to_write() {
				uni.navigateTo({
					url: "./fabu"
				})
			}

			/**
			 *          $vuetag = "";
			 *          $vuecss = "";
			 *          $vuejs = "";
			 *
			 */

			//获取数据

		}
	}
</script>

<style lang="less">
	/**
 *
 此处必须引用colorui样式,并放入根目录，css样式可以这样写
	@import "colorui/main.css";
	@import "colorui/icon.css";

 如需要引用colorui到全局，
 需要在App.vue 引入
 	@import "colorui/main.css";
	@import "colorui/icon.css";
 *
 */




	/**本页全局配置的代码**/
	.pageconfig {
		width: 100%;
		overflow: hidden;
		overflow-y: scroll;
		height: 100vh;
	}



	/**pagedomcss**/


	.flex1 {
		width: 100%;
		margin-top: 60rpx;
	}

	.text2 {
		text-align: left;
		margin-top: 40rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
		font-weight: 700;
	}

	.flex3 {
		width: 100%;
		width: calc(100% - 40rpx);
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
	}

	.flex4 {
		width: 100%;
		width: calc(100% - 40rpx);
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
	}

	.flex5 {
		width: 19%;
		background-color: rgba(255, 235, 242, 1);
		padding-left: 12rpx;
	}

	.text6 {
		color: rgba(236, 129, 167, 1);
		text-align: left;
		font-weight: 700;
	}

	.text7 {
		text-align: left;
		font-weight: 700;
	}

	.flex8 {
		width: 100%;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
	}

	.flex9 {
		width: 56%;
		height: 472rpx;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
	}

	.flex10 {
		width: 100%;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.text11 {
		margin-bottom: 10rpx;
	}

	.text12 {
		margin-bottom: 10rpx;
	}

	.text13 {
		font-weight: 500;
	}

	.flex14 {
		width: 100%;
		height: 70rpx;
		background-color: rgba(255, 112, 162, 1);
		margin-top: 80rpx;
		margin-bottom: 40rpx;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
	}

	.picture15 {
		width: calc(34rpx - 20rpx);
		overflow: hidden;
		height: 32rpx;
		margin-right: 10rpx;
	}

	.flex17 {
		width: 100%;
	}

	.picture18 {
		width: calc(28rpx - 40rpx);
		overflow: hidden;
		height: 24rpx;
		margin-top: 0rpx;
		margin-bottom: 0rpx;
		margin-left: 0rpx;
		margin-right: 20rpx;
	}

	.text20 {
		color: rgba(255, 112, 162, 1);
	}

	.flex22 {
		width: 50%;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
	}

	.picture23 {
		width: 428rpx;
		overflow: hidden;
		height: 432rpx;
	}

	.flex24 {
		width: 100%;
		width: calc(100% - 40rpx);
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
	}

	.flex25 {
		width: 70%;
		width: calc(70% - 40rpx);
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
	}

	.picture26 {
		width: calc(48rpx - 20rpx);
		overflow: hidden;
		height: 48rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.flex27 {
		width: 83%;
	}

	.text28 {
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		font-weight: 700;
	}

	.text29 {
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.flex30 {
		width: 22%;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		border: 4rpx solid rgba(99, 99, 99, 1);
	}

	.text31 {
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}
</style>